<template>
  <!-- 动态绑定类名，若优惠券已过期或已使用则添加 expired 类 -->
  <view
    :class="[
      'my-coupon',
      'flex',
      'mb-20',
      isExpired || isUsed ? 'expired' : '',
      isActive ? 'active' : '',
    ]"
  >
    <!-- 若支持选择优惠券，则显示复选框 -->
    <view v-if="selection" class="ml-20 flex items-center">
      <u-checkbox-group>
        <u-checkbox></u-checkbox>
      </u-checkbox-group>
    </view>
    <!-- 优惠券左侧信息区域 -->
    <view class="left flex-1">
      <!-- 若优惠券已使用，显示已使用图标 -->
      <view v-if="isUsed" class="used-icon">
        <u-image :src="ysyIcon" width="60" height="60"></u-image>
      </view>
      <!-- 优惠券标题区域 -->
      <view class="flex title mb-20">
        <!-- 优惠券图标 -->
        <view class="icon">
          <u-icon name="coupon-fill" color="#fff"></u-icon>
        </view>
        <!-- 优惠券名称 -->
        <view class="text">
          <u-text :text="data.name" :lines="1"></u-text>
        </view>
      </view>
      <!-- 优惠券详细信息区域 -->
      <view class="info">
        <!-- 若有有效期信息，显示有效期 -->
        <view class="field mb-10" v-if="data.end_at">
          <view class="label">有效期：</view>
          <view class="value">{{ data.end_at }}</view>
        </view>
        <!-- 显示优惠券使用限制信息 -->
        <view class="field mb-10">
          <view class="label">可用于：</view>
          <view class="value">
            <!-- 格式化并显示使用限制文本 -->
            <u-text
              :text="formatRestrictionsText(data.restrictions)"
              :lines="2"
            ></u-text>
          </view>
        </view>
        <!-- 若有备注信息，显示备注 -->
        <view class="field mb-10" v-if="data.remark">
          <view class="label">备注：</view>
          <view class="value">
            <u-text :text="data.remark" :lines="2"></u-text>
          </view>
        </view>
      </view>
    </view>
    <!-- 优惠券右侧信息区域 -->
    <view class="right">
      <!-- 显示优惠券发行方信息 -->
      <view v-if="data.issuer">
        <u-text
          :text="`${data.issuer == 'platform' ? '平台' : '供货商'}`"
          color="#fff"
          align="center"
        ></u-text>
      </view>
      <!-- 现金优惠券信息 -->
      <view v-if="data.type == 'cash'">
        <u-text
          mode="price"
          :text="data.value"
          align="center"
          size="16"
          color="#fff"
          bold
        ></u-text>
      </view>
      <!-- 满减优惠券信息 -->
      <view v-if="data.type == 'full_cut'">
        <u-text
          mode="price"
          :text="data.value"
          align="center"
          size="16"
          color="#fff"
          bold
        ></u-text>
        <u-text
          :text="`满${data.min_purchase}可用`"
          size="12"
          color="#fff"
        ></u-text>
      </view>
      <!-- 折扣优惠券信息 -->
      <view v-if="data.type == 'discount'">
        <!-- 若有折扣率，显示折扣信息 -->
        <u-text
          v-if="data.discount_rate"
          :text="data.discount_rate * 10 + '折'"
          color="#fff"
        ></u-text>
        <!-- 若无折扣率，显示无折扣信息 -->
        <u-text v-else text="无折扣" color="#fff"></u-text>
      </view>
      <!-- 礼品卡优惠券信息 -->
      <view v-if="data.type == 'gift'">
        <!-- 若有礼品商品信息，显示礼品名称 -->
        <template v-if="data.gift_product">
          <!-- <u-text
            :text="data.gift_product.sale_price"
            mode="price"
            color="#fff"
            align="center"
          ></u-text> -->
          <u-text
            align="center"
            :text="data.gift_product.name"
            color="#fff"
            :lines="1"
          ></u-text>
        </template>
      </view>
      <view v-if="showUseButton" style="margin-top: 10rpx">
        <u-button size="small" round type="primary" @click="toUse(data)"
          >去使用</u-button
        >
      </view>
    </view>
  </view>
</template>

<script setup>
// 引入已使用图标
import ysyIcon from "./ysy.png";
// 引入 Vue 的 computed 函数
import { computed, watch } from "vue";

/**
 * 定义组件的 props
 * @type {Object}
 * @property {Object} data - 优惠券数据
 * @property {boolean} selection - 是否支持选择优惠券
 * @property {boolean} isUsed - 优惠券是否已使用
 */
const props = defineProps({
  data: {
    type: Object,
    default: () => ({}),
  },
  selection: {
    type: Boolean,
    default: false,
  },
  isUsed: {
    type: Boolean,
    default: false,
  },
  showUseButton: {
    type: Boolean,
    default: false,
  },
  isActive: {
    type: Boolean,
    default: false,
  },
});

/**
 * 计算属性，判断优惠券是否已过期
 * @type {boolean}
 */
const isExpired = computed(() => {
  // 将优惠券的结束日期转换为时间戳，并与当前时间戳比较
  return new Date(props.data.end_at).getTime() < Date.now();
});

/**
 * 格式化优惠券使用限制文本
 * @param {Array} restrictions - 优惠券使用限制数组
 * @returns {string} - 格式化后的使用限制文本
 */
function formatRestrictionsText(restrictions) {
  // 若使用限制数组为空，返回 '无限制'
  if (!restrictions || !restrictions.length) {
    return "无限制";
  }
  const rs = [];
  // 遍历使用限制数组，提取供应商、分类和商品名称
  restrictions.map((item) => {
    if (item.supplier) {
      rs.push(item.supplier.name);
    }
    if (item.category) {
      rs.push(item.category.name);
    }
    if (item.product) {
      rs.push(item.product.name);
    }
  });
  // 将提取的名称用顿号连接成字符串
  return rs.join("、");
}

function toUse() {
  const params = {
    type: "coupon",
  };
  props.data.restrictions.forEach((item) => {
    if (item.supplier) {
      params.supplierId = item.supplier.id;
      params.supplierName = item.supplier.name;
    }
    if (item.category) {
      params.categorizeId = item.category.id;
      params.categorizeName = item.category.name;
    }
    if (item.product) {
      params.productId = item.product.id;
      params.productName = item.product.name;
    }
  });
  if (params.productId) {
    return uni.$u.route({
      url: "/pages/goods/detail",
      params: {
        id: params.productId,
      },
    });
  }
  uni.$u.route({
    url: "/pages/goods/list",
    params,
  });
}
</script>

<style lang="scss" scoped>
.my-coupon {
  background-color: #f0f0f0;
  border-radius: 10rpx;
  overflow: hidden;

  &.active {
    filter: hue-rotate(200deg) saturate(150%) brightness(90%);
  }

  // 若优惠券已过期或已使用，应用灰度滤镜
  &.expired {
    filter: grayscale(100%);
  }

  .left {
    padding: 20rpx;
    position: relative;

    // 已使用图标样式
    .used-icon {
      position: absolute;
      right: 10rpx;
      top: 10rpx;
    }

    .title {
      .icon {
        background-color: #e54d42;
        border-radius: 10rpx;
        padding: 10rpx;
      }

      .text {
        margin-left: 20rpx;
      }
    }

    .info {
      .field {
        display: flex;

        .label {
          color: #6c6c6c;
        }

        .value {
          flex: 1;
        }
      }
    }
  }

  .right {
    width: 200rpx;
    background-color: #e54d42;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}
</style>
